<!--
 * @Author: ruins
 * @Date: 2022-01-17 08:56:20
 * @LastEditors: ruins
 * @LastEditTime: 2022-01-21 11:08:44
 * @FilePath: \white-dragon\src\views\Position\index.vue
-->
<template>
  <div class="position-container">
    <title-bar>
      <p>求职</p>
    </title-bar>
    <el-container>
      <el-header style="height: 90px;">
        <!-- 热门城市 -->
        <div class="city">
          <el-row type="flex" justify="space-between">
            <el-col :span="22">
              热门城市:
              <span
                class="hotcity-item"
                v-for="item in hotCity"
                :key="item"
                @click="filterCity(item)"
              >{{ item }}</span>
            </el-col>
            <el-col :span="2">
              <el-button type="text" style="float: right;" @click="showMoreCity">更多城市</el-button>
            </el-col>
          </el-row>
        </div>

        <!-- 条件筛选 -->
        <el-row type="flex" justify="space-between">
          <el-col :span="20">
            <div class="filter">
              <!-- 工作经验 -->
              <el-select
                v-model="filter.experience"
                placeholder="工作经验"
                clearable
                @change="changeFilter"
              >
                <el-option
                  v-for="item in experienceList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.level"
                ></el-option>
              </el-select>

              <!-- 薪资 -->
              <el-select
                v-model="filter.salary"
                placeholder="薪资要求"
                clearable
                @change="changeFilter"
              >
                <el-option
                  v-for="item in salaryList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.level"
                ></el-option>
              </el-select>

              <!-- 学历 -->
              <el-select
                v-model="filter.education"
                placeholder="学历要求"
                clearable
                @change="changeFilter"
              >
                <el-option
                  v-for="item in educationList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.level"
                ></el-option>
              </el-select>

              <!-- 公司名称 -->
              <el-input
                size="small"
                placeholder="公司名称"
                suffix-icon="el-icon-search"
                v-model.trim="filter.name"
                @blur="changeFilter"
                @change="changeFilter"
                style="width: 180px;"
              ></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <el-button type="text" style="float: right;" @click="clearFilter">清空筛选条件</el-button>
          </el-col>
        </el-row>
      </el-header>

      <!-- 主体 -->
      <el-main>
        <Company :companyList="companyList" />
      </el-main>
    </el-container>

    <!-- 城市弹出框 -->
    <el-dialog class="city-dialog" title="请选择城市" :visible.sync="cityDialogVisible" width="840px">
      <!-- 标签页 -->
      <el-tabs v-model="activeName">
        <!-- 热门城市 -->
        <el-tab-pane label="热门城市" name="hotCity">
          <el-row>
            <el-col
              class="dialog-city-item"
              :span="4"
              v-for="item in hotCity"
              :key="item"
              @click.native="filterCity(item)"
            >{{ item }}</el-col>
          </el-row>
        </el-tab-pane>
        <!-- 省份 -->
        <el-tab-pane :label="pro.name" :name="pro.code" v-for="pro in mapList" :key="pro.code">
          <el-row>
            <el-col
              class="dialog-city-item"
              :span="4"
              v-for="city in pro.children"
              :key="city.code"
              @click.native="filterCity(item)"
            >{{ city.name }}</el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { getHotCity, getMapInfo, getCompanyInfo, filterCompanyInfo, filterCity } from '@/apis/positon'
import Company from './components/Company.vue'

export default {
  name: 'Position',
  data () {
    return {
      /* 热门城市 */
      hotCity: [],
      /* 省份城市数据 */
      mapList: [],
      /* 公司招聘数据 */
      companyList: [],
      /* 城市弹出框 */
      cityDialogVisible: false,
      /* 筛选条件 */
      filter: {
        experience: 0,
        education: 0,
        salary: 0,
        name: ''
      },
      /* 城市弹出框标签页 */
      activeName: 'hotCity',
      /* 工作经验 */
      experienceList: [
        { name: '不限', level: 0 },
        { name: '在校生', level: 1 },
        { name: '应届生', level: 2 },
        { name: '一年以内', level: 3 },
        { name: '1-3年', level: 4 },
        { name: '3-5年', level: 5 },
        { name: '5-10年', level: 6 },
        { name: '10年以上', level: 7 }
      ],
      /* 薪资 */
      salaryList: [
        { name: '不限', level: 0 },
        { name: '3k以下', level: 1 },
        { name: '3-5k', level: 2 },
        { name: '5-10k', level: 3 },
        { name: '10-15k', level: 4 },
        { name: '15-20k', level: 5 },
        { name: '20-30k', level: 6 },
        { name: '30-50k', level: 7 }
      ],
      /* 学历 */
      educationList: [
        { name: '不限', level: 0 },
        { name: '大专以下', level: 1 },
        { name: '大专', level: 2 },
        { name: '本科', level: 3 },
        { name: '硕士', level: 4 },
        { name: '博士', level: 5 }
      ]

    }
  },
  components: {
    Company
  },
  computed: {},
  watch: {},

  methods: {
    /* 获取热门城市 */
    async getHotCity () {
      try {
        const { data } = await getHotCity()
        this.hotCity = data
      } catch (error) {
        console.dir(error)
      }
    },

    /* 获取省份城市数据 */
    async getMapInfo () {
      try {
        const { data } = await getMapInfo()
        this.mapList = data
      } catch (error) {
        console.dir(error)
      }
    },

    /* 获取公司招聘数据 */
    async getCompanyInfo () {
      try {
        const { data } = await getCompanyInfo()
        data.forEach(v => {
          v.comFlag = false
        })
        this.companyList = data
      } catch (error) {
        console.dir(error)
      }
    },

    /* 显示更多的城市 */
    showMoreCity () {
      this.cityDialogVisible = true
    },

    /* 清空筛选条件 */
    clearFilter () {
      this.filter = {
        experience: 0,
        education: 0,
        salary: 0,
        name: ''
      }
      this.changeFilter()
    },

    /* 筛选城市 */
    async filterCity (city) {
      city = city === '全国' ? '' : city
      this.cityDialogVisible = false
      const { data } = await filterCity(city)
      data.forEach(v => {
        v.comFlag = false
      })
      this.companyList = data
    },

    /* 改变筛选条件 */
    async changeFilter () {
      const { data } = await filterCompanyInfo(this.filter)
      data.forEach(v => {
        v.comFlag = false
      })
      this.companyList = data
    }
  },
  created () {
    this.getHotCity()
    this.getMapInfo()
    this.getCompanyInfo()
  },
  mounted () { }
}
</script>

<style lang="scss" scoped>
.position-container {
  min-width: 1100px;

  .el-header {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 8px 20px;
    line-height: 36px;
    background-color: #fff;

    .city,
    .map,
    .company {
      border-bottom: 1px solid #eef0f5;
      color: #414a60;
    }

    .city {
      .hotcity-item {
        display: inline-block;
        background: #fff;
        padding: 0 11px;
        border: 1px #fff solid;
        margin: 0;
        height: 36px;
        line-height: 36px;
        transition: color 0.1s;
        cursor: pointer;

        &:hover {
          color: #fc6c38;
        }
      }
    }

    .filter {
      .el-select {
        padding-right: 28px;
      }

      ::v-deep .el-input__inner {
        border: none;
        width: 120px;
      }
    }
  }

  .el-main {
    color: #61687c;
    margin-top: 20px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
    padding: 20px 30px;
  }

  ::v-deep .el-dialog {
    height: 500px;
    .dialog-city-item {
      height: 40px;
      margin-bottom: 8px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;

      &:hover {
        color: #5dd5c8;
      }
    }
  }
}
</style>
